<template>

    <div class="policeRankingBox d-flex">
        <div id="policeRankingRadarBox"></div>

        <div style="width: 180px" class="d-flex flex-column align-items-center">
            <div class="mb-10">
                <SwitchTimeTab @jchange="switchTimeTabChange"></SwitchTimeTab>
            </div>

            <div class=" px-6 py-10 w-100" style="border:1px solid #0B3358;background-color:rgba(0,1,4,0.5)">
                <div class="flexCenterBetween mb-10" v-for="(item,i) in dataBrigadeList.top5Check" :key="i">
                    <div class="flexCenter">
                        <div :style="{color:item.color,borderColor:item.color }"
                             style="width:16px;line-height:16px;height:16px;border-radius: 100px;border:1px solid;text-align:center">
                            {{i+1}}
                        </div>
                        <div class="ml-6">{{item.name}}</div>
                    </div>
                    <div class="font-weight-bold text-fab96d" :style="{color:item.color}">{{item.number}}
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import {getBrigadeList, getExpresswaySummary, getExpresswayTrafficFlow} from "../../common/api";
    import {echartsRadarOptionFactory} from "../../common/echart-config/echart-config";
    import echarts from 'echarts'
    import SwitchTimeTab from "@/components/switch-time-tab.vue";
    import {brigadeColor} from "../../common/data/sys-data";
    import {getLastWeekRange} from "../../utils/js-utils";


    export default {
        name: "policeRanking",
        components: {SwitchTimeTab},
        data() {
            return {
                range: [],
                brigadeColor: brigadeColor,

                dataBrigadeList: {},// 勤务排名

                echartsPoliceRankingRadarChart: null, //
            }
        }, methods: {

            switchTimeTabChange(range) {
                console.log(range)
                this.range = range;
                this.getBrigadeList();
            },
            getBrigadeList() {// 勤务排名
                var reqBoxy = {};
                reqBoxy.startTime = this.range[0];
                reqBoxy.endTime = this.range[1];
                getBrigadeList(reqBoxy).then(res => {
                    if (res.isSuccess) {
                        this.dataBrigadeList = res.data;
                        this.biuldPoliceRankingRadarChart()
                    }
                })
            },
            biuldPoliceRankingRadarChart() {
                this.echartsPoliceRankingRadarChart = echarts.init(document.getElementById('policeRankingRadarBox'));
                this.dataBrigadeList.top5Check.forEach((v, i) => {
                    v.color = this.brigadeColor[i];
                });
                this.dataBrigadeList.radar.forEach((v, i) => {
                    v.color = this.brigadeColor[i];
                    v.value = [v.dailyPatrol, v.comprehensiveScore, v.leaderScore, v.accidentHandling, v.trafficLaw,]
                })
                //  accidentHandling:事故处理评分, comprehensiveScore: 综合评分,trafficLaw: 交通执法, dailyPatrol: 日常巡逻, leaderScore: 领导巡查,
                //逆时针
                var option = echartsRadarOptionFactory(this.dataBrigadeList.radar);

                this.echartsPoliceRankingRadarChart.setOption(option);

            },
        },
        mounted() {
            this.range = getLastWeekRange();
            this.getBrigadeList()
            // this.biuldPoliceRankingRadarChart();


        }, beforeDestroy() {
            this.echartsPoliceRankingRadarChart.clear();

        }
    }
</script>

<style scoped>

    .policeRankingBox {
        background-image: url("../../assets/img/dutyMonitoring/bgPoliceRanking.png");
        height: 319px;
        position: relative;
        padding: 60px 10px 20px 30px;
        margin-top: -20px;

    }

    #policeRankingRadarBox {
        width: 300px;
        height: 240px;
        margin-right: 16px;
        /*background-color: white;*/
    }

</style>
